<!DOCTYPE html>
<script src="../resources/text-based-repaint.js"></script>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script>
window.testIsAsync = true;
window.onload = runRepaintTest;

function repaintTest() {
  var circle = document.getElementsByTagName("circle")[0];
  ani = circle.animate([{ color: "blue" }, { color: "cyan"}], { duration: 2000, iterations: 1});
  setTimeout(function() {
    ani.currentTime = 1000;
    ani.pause();
    runAfterLayoutAndPaint(finishRepaintTest);
  }, 1);
}
</script>
<style>
circle {
  fill: currentColor;
  color: blue;
}
</style>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width=90 height=90>
  <circle r="40" cx="40" cy="40" />
</svg>
</body>
